$(function() {

    // 1 初始化 表单组件
    function initComponent(callback) {

        // 1.1 处理 封面上传即时显示
        function renderCover() {
            $("#inputCover").change(function() {
                const file = this.files[0];
                const src = URL.createObjectURL(file);
                $("#coverimg").prop("src", src);
            })
        }

        // 1.2 处理 文章类别
        function getCategorytList() {
            $.get("/admin/category/list", function(res) {
                let html = "<option value=''>所有分类</option>";
                res.data.forEach(item => {
                    html += `<option value="${item.id}" >${item.name}</option>`;
                });
                $("#category").html(html);


                // 2 获取到被编辑的文章id 发送请求 获取文章数据 填充到 表单中！！！ 
                // 获取文章详情的代码  必须要等到 文章分类的请求回来 才去获取！！ 
                callback();
            })
        }

        // 1.3 处理 日期选择框
        function renderLayuiDate() {
            //执行一个laydate实例
            layui.laydate.render({
                elem: '#articleDate' //指定元素
            });
        }

        // 1.4 处理 富文本
        function renderTimyMce() {
            tinymce.init({
                selector: '#articleContent',
                language: 'zh_CN', //注意大小写
            });
        }

        // 1.1 处理 封面上传即时显示
        renderCover();
        // 1.2 处理 文章类别
        getCategorytList();
        // 1.3 处理 日期选择框
        renderLayuiDate();
        // 1.4 处理 富文本
        renderTimyMce();
    }


    // 2 获取到被编辑的文章id 发送请求 获取文章数据 填充到 表单中！！！ 
    function articleSearch() {
        const id = getUrlParams("id");
        $.get("/admin/article/search", { id }, function(res) {
            const data = res.data;

            // 2.1 设置到 表单中
            $("input[name='title']").val(data.title); // 标题
            // 文章封面！！ 注意  
            $("#coverimg").prop("src", data.cover);
            // 文章类别   容易有bug！！！ 
            $("select[name='categoryId']").val(data.categoryId);
            // 填充 日期
            $("input[name='date']").val(data.date);
            // 填充富文本的内容
            // console.log(data.content);
            // setTimeout(() => {
            // tinyMCE.editors["articleContent"].setContent(data.content); // 跑不通  程序本来有问题  
            // }, 1000);
            $("#articleContent").val(data.content);

        })

    }

    // 1 初始化 表单组件
    initComponent(articleSearch);


    // 2 给发布按钮 绑定点击事件
    $(".btn-edit").click(function() {
        postArticle("已发布");
    })

    // 2 给 草稿按钮 绑定点击事件
    $(".btn-draft").click(function() {
        postArticle();
    })

    // 4 对获取表单数据 和提交 数据 做封装
    function postArticle(state = "") {

        const formdata = new FormData($("form")[0]);
        formdata.append("content", tinyMCE.editors["articleContent"].getContent());
        formdata.append("state", state);

        // 拼接id
        formdata.append("id", getUrlParams("id"));


        $.ajax({
            url: "/admin/article/edit",
            type: "post",
            data: formdata,
            contentType: false,
            processData: false,
            success(res) {
                console.log(res);
                // 2.4 
                // 2.4.1 显示提示框 提示用户发布成功 
                // 2.4.2 设定一个延时器  1.5s  再去跳转 到 文章列表页面即可
                layer.msg(res.msg);
                setTimeout(() => {
                    location.href = "article_list.html";
                }, 1500);
            }
        })
    }



    // 获取url上的参数
    function getUrlParams(key) {
        const usp = new URLSearchParams(location.search);
        return usp.get(key);
    }


})